<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  
  <script src="../common/js/jquery/jquery-3.5.1.min.js"></script>
  
  <title>油料管理</title>
  <style type="text/css">
    html,body{
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: hidden;
      margin: 0;
      padding: 0;
      background: #1B6DF5 url('./images/background.png') no-repeat;
      background-position:center center;
      background-size:cover;
    }
    .left,.middle,.right {
      padding:1rem;
    }
    .left ,.right {
      flex:1;
      display: flex;
      flex-direction: column;
    }
    .left .item {
      width:100%;
      flex:1;
      background:#00316D;
    }
    .right .item {
      width:100%;
      flex:1;
      background:#00316D;
    }
    .middle {
      flex:1;
      display: flex;
      flex-direction: column;
    }
    .middle .item {
      width:100%;
    }
  </style>
</head>
<body>
<div class="container" style="width:100%;height:100%;display: flex;">
  
  <div class="left" style="">
    <div id="getUse" class="item" style="">
  
    </div>
    <div id="oilUse" class="item" style="">
      
    </div>
    <div id="waitGetUse" class="item" style="">
      
    </div>
  </div>
  <div class="middle" style="">
    <div class="item" style="display: flex;justify-content: center;align-items: center;padding-bottom: 1.5rem;">
      <img src="./images/title1.png"/>
      <span style="padding: 0 1rem;font-size: 2.5rem;font-weight: bold;
      background: linear-gradient(to bottom, #00FFDB , #00B0ED);-webkit-background-clip: text;color: transparent;">
        油料管理
      </span>
      <img src="./images/title2.png"/>
    </div>
    <div id="totalStock" class="item" style="flex:1;">
  
    </div>
    <div class="item" style="padding-top: 2rem;">
      <div style="text-align: center;color: #fff">
        油料剩余库存(升)
      </div>
      <div id="surplusStock" style="height: 145px;">
        
      </div>
    </div>
    <div id="monthDelivery" class="item" style="background:#00316D;flex:1;">
      
    </div>
  </div>
  <div class="right" style="">
    <div id="measure" class="item" style="">
  
    </div>
    <div id="oilCount" class="item" style="">
      
    </div>
    <div id="finalAccounts" class="item" style="">
      
    </div>
  </div>
  
</div>
<script src="../common/js/echarts/4.2.1/echarts.js"></script>
<script src="js/index.js"></script>
</body>
</html>